<template>
  <view class="websocket-example-container">
    <view class="page-header">
      <text class="page-title">WebSocket 通讯协议测试</text>
      <text class="page-subtitle">测试2024最新版WebSocket通讯协议</text>
    </view>

    <!-- 连接控制 -->
    <view class="section">
      <view class="section-title">连接控制</view>
      <view class="connection-status">
        <text class="status-label">连接状态:</text>
        <view class="status-indicator" :class="{ 'connected': connected, 'connecting': connecting, 'disconnected': !connected && !connecting }">
          {{ connected ? '已连接' : connecting ? '连接中...' : '未连接' }}
        </view>
      </view>
      
      <view class="connection-controls">
        <button class="connect-btn" @click="connectServer" :disabled="connecting || connected">
          {{ connecting ? '连接中...' : connected ? '已连接' : '连接服务器' }}
        </button>
        <button class="disconnect-btn" @click="disconnectServer" :disabled="!connected">
          断开连接
        </button>
      </view>
      
      <view v-if="error" class="error-message">
        <text class="error-text">{{ error }}</text>
      </view>
    </view>

    <!-- 消息测试 -->
    <view class="section">
      <view class="section-title">消息测试</view>
      
      <!-- 基础消息测试 -->
      <view class="test-group">
        <view class="group-title">基础消息</view>
        <view class="test-buttons">
          <button class="test-btn" @click="sendHeartbeat" :disabled="!connected">心跳消息</button>
          <button class="test-btn" @click="sendLogin" :disabled="!connected">登录消息</button>
        </view>
      </view>

      <!-- 房间消息测试 -->
      <view class="test-group">
        <view class="group-title">房间消息</view>
        <view class="test-buttons">
          <button class="test-btn" @click="sendRoomStatusChange" :disabled="!connected">房间状态变更</button>
          <button class="test-btn" @click="sendRoomSeatStatusChange" :disabled="!connected">席位状态变更</button>
          <button class="test-btn" @click="sendRoomSeatOwnerStatusChange" :disabled="!connected">成绩上报</button>
        </view>
      </view>

      <!-- 魔方操作测试 -->
      <view class="test-group">
        <view class="group-title">魔方操作</view>
        <view class="test-buttons">
          <button class="test-btn" @click="sendCubeMove" :disabled="!connected">魔方移动</button>
          <button class="test-btn" @click="sendCubeAngle" :disabled="!connected">陀螺仪数据</button>
          <button class="test-btn" @click="sendCubeState" :disabled="!connected">魔方状态</button>
        </view>
      </view>

      <!-- 批量测试 -->
      <view class="test-group">
        <view class="group-title">批量测试</view>
        <view class="test-buttons">
          <button class="test-btn batch-btn" @click="sendAllMessages" :disabled="!connected">发送所有消息</button>
          <button class="test-btn batch-btn" @click="sendRandomMessages" :disabled="!connected">随机消息</button>
        </view>
      </view>
    </view>

    <!-- 消息格式展示 -->
    <view class="section">
      <view class="section-title">消息格式</view>
      <view class="format-tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'json' }"
          @click="activeTab = 'json'"
        >
          JSON格式
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'protocol' }"
          @click="activeTab = 'protocol'"
        >
          协议说明
        </view>
      </view>
      
      <view class="format-content">
        <view v-if="activeTab === 'json'" class="json-examples">
          <view class="example-item">
            <text class="example-title">心跳消息 (MessageType: 1000)</text>
            <text class="example-code">{{ JSON.stringify(heartbeatExample, null, 2) }}</text>
          </view>
          <view class="example-item">
            <text class="example-title">登录请求 (MessageType: 1001)</text>
            <text class="example-code">{{ JSON.stringify(loginExample, null, 2) }}</text>
          </view>
          <view class="example-item">
            <text class="example-title">房间状态变更 (MessageType: 1010)</text>
            <text class="example-code">{{ JSON.stringify(roomStatusExample, null, 2) }}</text>
          </view>
          <view class="example-item">
            <text class="example-title">魔方移动 (MessageType: 1100)</text>
            <text class="example-code">{{ JSON.stringify(cubeMoveExample, null, 2) }}</text>
          </view>
          <view class="example-item">
            <text class="example-title">成绩上报 (MessageType: 1030)</text>
            <text class="example-code">{{ JSON.stringify(scoreReportExample, null, 2) }}</text>
          </view>
        </view>
        
        <view v-if="activeTab === 'protocol'" class="protocol-info">
          <text class="info-text">2024最新版WebSocket通讯协议：</text>
          <text class="info-text">• 客户端 → 服务端: 1000-1102</text>
          <text class="info-text">• 服务端 → 客户端: 2000-2102</text>
          <text class="info-text">• 支持房间状态、席位状态、魔方操作等</text>
          <text class="info-text">• 所有消息均为JSON格式，服务端自动转换为Protobuf</text>
        </view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="section">
      <view class="section-title">实时消息</view>
      <view class="messages-container">
        <view 
          class="message-item" 
          v-for="(message, index) in messages.slice(-20)" 
          :key="index"
          :class="message.type"
        >
          <text class="message-time">{{ formatTime(message.timestamp) }}</text>
          <text class="message-content">
            <text class="sender">{{ message.sender }}:</text> {{ message.content }}
          </text>
        </view>
      </view>
      <button class="clear-btn" @click="clearMessages">清空消息</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import SocketServerAdapter from '@/utils/socketServerAdapter.js'

// 响应式数据
const socketAdapter = ref(null)
const connected = ref(false)
const connecting = ref(false)
const error = ref('')
const messages = ref([])
const currentRoom = ref('room123')
const activeTab = ref('json')

// 消息示例
const heartbeatExample = {
  messageType: 1000,
  timestamp: Date.now(),
  roomId: "room123"
}

const loginExample = {
  messageType: 1001,
  token: "user-token-xxx"
}

const roomStatusExample = {
  messageType: 1010,
  roomId: "room123",
  event: 1
}

const cubeMoveExample = {
  messageType: 1100,
  move: "R",
  interval: 100,
  step: 1,
  rotate: 90,
  modify: 0
}

const scoreReportExample = {
  messageType: 1030,
  userId: "user123",
  steps: 20,
  rotate: 90,
  tps: 3.5,
  smooth: 1,
  currentTPS: 3.2,
  progress: 75
}

// 初始化Socket适配器
const initSocketAdapter = () => {
  socketAdapter.value = new SocketServerAdapter()
  
  // 监听连接状态
  socketAdapter.value.on('connection_status', (data) => {
    connected.value = data.connected || false
  })
  
  // 监听各种消息
  socketAdapter.value.on('heartbeat_response', (data) => {
    addMessage('系统', `心跳响应: ${JSON.stringify(data)}`, 'success')
  })
  
  socketAdapter.value.on('room_status_change', (data) => {
    addMessage('系统', `房间状态变更: ${JSON.stringify(data)}`, 'info')
  })
  
  socketAdapter.value.on('room_seat_status_change', (data) => {
    addMessage('系统', `席位状态变更: ${JSON.stringify(data)}`, 'info')
  })
  
  socketAdapter.value.on('room_seat_owner_status_change', (data) => {
    addMessage('系统', `成绩上报响应: ${JSON.stringify(data)}`, 'success')
  })
  
  socketAdapter.value.on('player_cube_move', (data) => {
    addMessage('系统', `魔方移动广播: ${JSON.stringify(data)}`, 'info')
  })
  
  socketAdapter.value.on('player_cube_angle', (data) => {
    addMessage('系统', `陀螺仪数据广播: ${JSON.stringify(data)}`, 'info')
  })
  
  socketAdapter.value.on('player_cube_state', (data) => {
    addMessage('系统', `魔方状态广播: ${JSON.stringify(data)}`, 'info')
  })
  
  socketAdapter.value.on('unknown_message', (data) => {
    addMessage('系统', `未知消息: ${JSON.stringify(data)}`, 'warning')
  })
}

// 连接服务器
const connectServer = async () => {
  try {
    connecting.value = true
    error.value = ''
    
    // 确保只初始化一次
    if (!socketAdapter.value) {
      initSocketAdapter()
    }
    
    const success = await socketAdapter.value.connect()
    
    if (success) {
      connected.value = true
      addMessage('系统', 'WebSocket连接成功', 'success')
      
      // 自动登录
      socketAdapter.value.login('test-token-' + Date.now())
      
      uni.showToast({
        title: '连接成功',
        icon: 'success'
      })
    } else {
      throw new Error('连接失败')
    }
  } catch (err) {
    console.error('连接失败:', err)
    error.value = err.message || '连接失败'
    addMessage('系统', `连接失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: '连接失败',
      icon: 'none'
    })
  } finally {
    connecting.value = false
  }
}

// 断开连接
const disconnectServer = () => {
  try {
    if (socketAdapter.value) {
      socketAdapter.value.disconnect()
    }
    connected.value = false
    error.value = ''
    addMessage('系统', 'WebSocket连接已断开', 'info')
    
    uni.showToast({
      title: '已断开连接',
      icon: 'success'
    })
  } catch (err) {
    console.error('断开连接失败:', err)
  }
}

// 发送心跳消息
const sendHeartbeat = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const success = socketAdapter.value.sendHeartbeat(currentRoom.value)
    
    if (success) {
      addMessage('用户', `发送心跳: roomId=${currentRoom.value}`, 'info')
      uni.showToast({
        title: '心跳发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('心跳发送失败')
    }
  } catch (err) {
    console.error('发送心跳失败:', err)
    addMessage('系统', `发送心跳失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送登录消息
const sendLogin = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const token = 'test-token-' + Date.now()
    const success = socketAdapter.value.login(token)
    
    if (success) {
      addMessage('用户', `发送登录: ${token}`, 'info')
      uni.showToast({
        title: '登录发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('登录发送失败')
    }
  } catch (err) {
    console.error('发送登录失败:', err)
    addMessage('系统', `发送登录失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送房间状态变更
const sendRoomStatusChange = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const events = [1, 2, 3, 4] // 房间事件类型：1=创建, 2=解散, 3=开始, 4=结束
    const randomEvent = events[Math.floor(Math.random() * events.length)]
    
    const success = socketAdapter.value.sendRoomStatusChange(currentRoom.value, randomEvent)
    
    if (success) {
      addMessage('用户', `房间状态变更: roomId=${currentRoom.value}, event=${randomEvent}`, 'info')
      uni.showToast({
        title: '房间状态变更发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('房间状态变更发送失败')
    }
  } catch (err) {
    console.error('发送房间状态变更失败:', err)
    addMessage('系统', `发送房间状态变更失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送房间席位状态变更
const sendRoomSeatStatusChange = () => {
	const seatId = 'seat-' + Math.floor(Math.random() * 1000)
	const randomEvent = Math.floor(Math.random() * 9) // 0-8的事件类型
	const roomId = 'room-' + Math.floor(Math.random() * 1000)
	
	const success = socketAdapter.value.sendRoomSeatStatusChange(seatId, randomEvent, roomId)
	
	if (success) {
		console.log('席位状态变更消息发送成功')
		uni.showToast({
			title: '席位状态变更消息已发送',
			icon: 'success'
		})
	} else {
		console.error('席位状态变更消息发送失败')
		uni.showToast({
			title: '席位状态变更消息发送失败',
			icon: 'error'
		})
	}
}

// 发送成绩上报
const sendRoomSeatOwnerStatusChange = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const userId = 'user' + Math.floor(Math.random() * 1000)
    const steps = Math.floor(Math.random() * 50) + 10
    const rotate = Math.floor(Math.random() * 360)
    const tps = Math.random() * 5 + 1
    const smooth = Math.random()
    const currentTPS = Math.random() * 4 + 1
    const progress = Math.floor(Math.random() * 100)
    
    const success = socketAdapter.value.sendRoomSeatOwnerStatusChange(
      userId, steps, rotate, tps, smooth, currentTPS, progress
    )
    
    if (success) {
      addMessage('用户', `成绩上报: userId=${userId}, steps=${steps}, progress=${progress}%`, 'info')
      uni.showToast({
        title: '成绩上报发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('成绩上报发送失败')
    }
  } catch (err) {
    console.error('发送成绩上报失败:', err)
    addMessage('系统', `发送成绩上报失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送魔方移动消息
const sendCubeMove = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const moves = ['R', 'L', 'U', 'D', 'F', 'B']
    const randomMove = moves[Math.floor(Math.random() * moves.length)]
    const interval = Math.floor(Math.random() * 200) + 50
    const step = Math.floor(Math.random() * 3) + 1
    const rotate = Math.floor(Math.random() * 180) + 90
    const modify = Math.floor(Math.random() * 2)
    
    const success = socketAdapter.value.sendCubeMove(randomMove, interval, step, rotate, modify)
    
    if (success) {
      addMessage('用户', `魔方移动: move=${randomMove}, interval=${interval}ms`, 'info')
      uni.showToast({
        title: '魔方移动发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('魔方移动发送失败')
    }
  } catch (err) {
    console.error('发送魔方移动失败:', err)
    addMessage('系统', `发送魔方移动失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送魔方角度消息
const sendCubeAngle = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const x = Math.floor(Math.random() * 360)
    const y = Math.floor(Math.random() * 360)
    const z = Math.floor(Math.random() * 360)
    
    const success = socketAdapter.value.sendCubeAngle(x, y, z)
    
    if (success) {
      addMessage('用户', `陀螺仪数据: x=${x}°, y=${y}°, z=${z}°`, 'info')
      uni.showToast({
        title: '陀螺仪数据发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('陀螺仪数据发送失败')
    }
  } catch (err) {
    console.error('发送陀螺仪数据失败:', err)
    addMessage('系统', `发送陀螺仪数据失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送魔方状态消息
const sendCubeState = () => {
  try {
    if (!socketAdapter.value) {
      throw new Error('WebSocket适配器未初始化，请先连接服务器')
    }
    
    if (!connected.value) {
      throw new Error('WebSocket未连接，请先点击"连接服务器"按钮')
    }
    
    const stateL = 'UFR' + Math.random().toString(36).substring(2, 8)
    const upFrontL = 'UF' + Math.random().toString(36).substring(2, 6)
    
    const success = socketAdapter.value.sendCubeState(stateL, upFrontL)
    
    if (success) {
      addMessage('用户', `魔方状态: stateL=${stateL}, upFrontL=${upFrontL}`, 'info')
      uni.showToast({
        title: '魔方状态发送成功',
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error('魔方状态发送失败')
    }
  } catch (err) {
    console.error('发送魔方状态失败:', err)
    addMessage('系统', `发送魔方状态失败: ${err.message}`, 'error')
    
    uni.showToast({
      title: err.message,
      icon: 'none',
      duration: 2000
    })
  }
}

// 发送所有消息
const sendAllMessages = () => {
  const messages = [
    () => sendLogin(),
    () => sendRoomStatusChange(),
    () => sendRoomSeatStatusChange(),
    () => sendRoomSeatOwnerStatusChange(),
    () => sendHeartbeat(),
    () => sendCubeMove(),
    () => sendCubeAngle(),
    () => sendCubeState()
  ]
  
  messages.forEach((sendMessage, index) => {
    setTimeout(() => {
      sendMessage()
    }, index * 500) // 每500ms发送一条消息
  })
  
  addMessage('系统', '开始批量发送所有消息类型', 'info')
}

// 发送随机消息
const sendRandomMessages = () => {
  const messageTypes = [
    sendHeartbeat,
    sendRoomStatusChange,
    sendRoomSeatStatusChange,
    sendRoomSeatOwnerStatusChange,
    sendCubeMove,
    sendCubeAngle,
    sendCubeState
  ]
  
  const sendRandom = () => {
    const randomType = messageTypes[Math.floor(Math.random() * messageTypes.length)]
    randomType()
  }
  
  // 发送5条随机消息
  for (let i = 0; i < 5; i++) {
    setTimeout(() => {
      sendRandom()
    }, i * 300)
  }
  
  addMessage('系统', '开始发送5条随机消息', 'info')
}

// 添加消息
const addMessage = (sender, content, type = 'info') => {
  const message = {
    sender,
    content,
    type,
    timestamp: Date.now()
  }
  messages.value.push(message)
  
  // 限制消息数量，保留最新的100条
  if (messages.value.length > 100) {
    messages.value = messages.value.slice(-100)
  }
}

// 清空消息
const clearMessages = () => {
  messages.value = []
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN')
}

// 页面加载时自动初始化
onMounted(() => {
  initSocketAdapter()
  addMessage('系统', '页面已加载，请点击"连接服务器"开始测试', 'info')
})

// 页面卸载时清理
onUnmounted(() => {
  if (connected.value && socketAdapter.value) {
    socketAdapter.value.disconnect()
  }
})
</script>

<style lang="scss" scoped>
.websocket-example-container {
  padding: 40rpx;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: #666;
    display: block;
  }
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.connection-status {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .status-label {
    font-size: 28rpx;
    color: #666;
    margin-right: 20rpx;
  }
  
  .status-indicator {
    padding: 8rpx 20rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: bold;
    
    &.connected {
      background: #d4edda;
      color: #155724;
    }
    
    &.connecting {
      background: #fff3cd;
      color: #856404;
    }
    
    &.disconnected {
      background: #f8d7da;
      color: #721c24;
    }
  }
}

.connection-controls {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .connect-btn, .disconnect-btn {
    flex: 1;
    height: 80rpx;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: bold;
    
    &:disabled {
      opacity: 0.6;
    }
  }
  
  .connect-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
  }
  
  .disconnect-btn {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
  }
}

.test-group {
  margin-bottom: 40rpx;
  
  .group-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #495057;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
    border-left: 4rpx solid #007bff;
  }
  
  .test-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
    
    .test-btn {
      flex: 1;
      min-width: 200rpx;
      height: 70rpx;
      border: none;
      border-radius: 10rpx;
      font-size: 26rpx;
      font-weight: bold;
      background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
      color: #fff;
      
      &:disabled {
        opacity: 0.6;
      }
      
      &.batch-btn {
        background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
        min-width: 300rpx;
      }
    }
  }
}

.format-tabs {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #e9ecef;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    border-bottom: 4rpx solid transparent;
    transition: all 0.3s;
    
    &.active {
      color: #007bff;
      border-bottom-color: #007bff;
      font-weight: bold;
    }
  }
}

.format-content {
  .json-examples {
    .example-item {
      margin-bottom: 30rpx;
      
      .example-title {
        display: block;
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .example-code {
        display: block;
        background: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 8rpx;
        padding: 20rpx;
        font-size: 24rpx;
        color: #495057;
        font-family: 'Courier New', monospace;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
  
  .protocol-info {
    .info-text {
      display: block;
      font-size: 26rpx;
      color: #495057;
      margin-bottom: 15rpx;
      line-height: 1.6;
    }
  }
}

.error-message {
  background: #f8d7da;
  border: 1rpx solid #f5c6cb;
  border-radius: 12rpx;
  padding: 20rpx;
  
  .error-text {
    color: #721c24;
    font-size: 26rpx;
  }
}

.messages-container {
  max-height: 600rpx;
  overflow-y: auto;
  border: 1rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .message-item {
    margin-bottom: 15rpx;
    padding: 10rpx;
    border-radius: 8rpx;
    
    &.success {
      background: #d4edda;
    }
    
    &.error {
      background: #f8d7da;
    }
    
    &.info {
      background: #d1ecf1;
    }
    
    .message-time {
      font-size: 22rpx;
      color: #666;
      margin-right: 10rpx;
    }
    
    .message-content {
      font-size: 26rpx;
      
      .sender {
        font-weight: bold;
        color: #333;
      }
    }
  }
}

.clear-btn {
  width: 100%;
  height: 60rpx;
  border: none;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: #fff;
  font-size: 26rpx;
}
</style> 